<!-- 支付结果页面 -->
<template>
  <div class="w750 white-bg">
    <!-- 头部 -->
    <header>
      <div class="header-box">
        <div class="header-back" @click="goOrderDetail">
          <span class="back-img"><img src="../../assets/images/back.png" alt=""></span>
        </div>
        <div class="header-search">
          <p class="ser-txt">支付结果</p>
        </div>
        <div class="header-mes"><a href="javascript:;" class="mes-img"></a></div>
      </div>
    </header>
    <!-- /头部 -->

    <template v-if="!isEmpty">
        <div class="submit-success" v-if="!errorMsg">
          <div class="sub-suc-tit">
            <span class="suc-img"><i class="img"><img src="../../assets/images/submit-success.png" alt=""></i><em class="txt">支付成功</em></span>
            <span class="suc-txt">您的订单已经支付，我们会为您尽快安排发货</span>
          </div>
          <div class="sub-suc-item">
            <p class="item-p"><span class="tit">订单编号：</span><span class="order-num">{{orderIfo.subNumber}}</span></p>
            <p class="item-p"><span class="tit">订单金额：</span><span class="order-price" :style="{'color': themes.color}">&#65509;{{orderIfo.actualTotal}}</span></p>
            <p class="item-p" v-if="orderIfo.subType != 'SHOP_STORE'"><span class="tit">收&nbsp;货&nbsp;&nbsp;人：</span><span class="name">{{orderIfo.receiver}}</span><span class="phone">{{orderIfo.mobile}}</span></p>
            <p class="item-p" v-if="orderIfo.subType != 'SHOP_STORE'"><span class="tit">收货地址：</span><span class="address">{{orderIfo.detailAddress}}</span></p>
          </div>
          <div class="sub-suc-btn clear">
            <a href="javascript:;" class="btn-a cur" @click="goOrderDetail" :style="{'color': themes.color}">查看订单</a>
            <a href="javascript:;" class="btn-a" @click="goIndex">返回首页</a>
          </div>
        </div>
      <!-- /提交成功 -->

        <!-- 支付失败 -->
        <Noempty :pic="require('../../assets/images/mes-empty.png')" :title="errorMsg" v-else></Noempty>
      
      <!-- 支付成功 -->
    </template>
  </div>
</template>

<script>
  import { Swipe , SwipeItem  , NavBar } from "vant";
  import cash from 'utils/tool'
  import {mapState} from 'vuex'
  import { successOrderDetail } from "api/order";
  export default {
    components: {
      NavBar
    },
    data() {
      return {
         
        isEmpty: true,
        orderIfo: null,      //订单信息
        errorMsg: null
      };
    },

    created() {
      let errorMsg = this.$route.query.message;
      this.errorMsg = errorMsg;
    },

    mounted() {
      let that = this

      if(!this.errorMsg){
        let subSettlementSn = this.$route.query.subSettlementSn;
        let subSettlementType = this.$route.query.subSettlementType;

        let params = {
          subSettlementSn:subSettlementSn
        }

        //获取成功的订单数据
        successOrderDetail(params).then( res => {
          if(res.status == 1) {
            this.orderIfo = res.result
          }
        }).finally(res => {
          that.isEmpty = false;
        });
      }else{
        that.isEmpty = false;
      }
    },
    methods: {
      //返回
      goback() {
        this.$router.replace('index');
        this.$router.isBack = true
      },

      //返回首页
      goIndex() {
        this.$router.replace('index');
      },

      //跳转订单列表
      goOrderList(){
        sessionStorage.setItem('status','')
        this.$router.replace('/orderList');
      },

      //去订单详情
      goOrderDetail() {
        this.$router.replace({
          path: `/orderDetail`,
          query: {
            subNumber: this.orderIfo.subNumber
          }
        })
      },
    },
    computed: {
      ...mapState(['themes']),
    },
  };
</script>

<style src="../../assets/css/style/submit-order-style.css" scoped></style>
<style src="../../assets/css/submit-order.css" scoped></style>